<template>
  <div class="child_videos">
    <loading v-if="!thisAlbumsData.name" />
    <div v-else class="album">
      <div class="title">
        <div class="name">
          <span>{{ thisAlbumsData.name }}</span>
          <span>({{ thisAlbumsData.videoNumber }}个)</span>
        </div>
        <div class="state">
          <span>
            状态：
            <i>{{ thisAlbumsData.state }}</i>
          </span>
        </div>
      </div>
      <div class="tags">
        <el-tag v-for="tag in thisAlbumsData.tags" :key="tag">{{ tag }}</el-tag>
      </div>
      <div class="time">
        <span>
          创建时间：
          <i>{{ thisAlbumsData.created | setDate}}</i>
        </span>
        <span>
          更新时间：
          <i>{{ thisAlbumsData.updated | setDate}}</i>
        </span>
      </div>
      <div class="desc">
        <span>{{ thisAlbumsData.desc }}</span>
      </div>
    </div>
    <div class="photo-list">
      <loading v-if="!childrenPhoto" />
      <ul v-else-if="childrenPhoto.length">
        <li v-for="child in childrenPhoto" :key="child._id" @click="openDrawer(child)">
          <div class="img">
            <video :src="child.videoUrl | setVideoUrl" alt />
          </div>
          <div class="text">
            <span>
              <i v-if="child.video.hot" class="el-icon-star-on"></i>
              {{ child.video.label }}
            </span>
          </div>
        </li>
      </ul>
      <div class="no-photo" v-else @click="gotoGm_sc()">
        <span>
          你还未上传视频到这个视频库，请点击这里
          <i>上传</i>视频。
        </span>
      </div>
    </div>
    <el-drawer
      :before-close="closeDrawer"
      class="drawer"
      v-if="childPhoto._id"
      size="50%"
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false"
    >
      <div class="img">
        <video ref="video" controls :src="childPhoto.videoUrl | setVideoUrl" alt />
      </div>
      <div class="detail">
        <div class="label">
          <p>
            <i v-if="childPhoto.video.hot" class="el-icon-star-on"></i>
            {{childPhoto.video.label}}
          </p>
          <p class="time">
            上传时间：
            <i>{{childPhoto.created}}</i>
          </p>
        </div>
        <div class="body">
          <p>{{childPhoto.video.body}}</p>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapState, mapActions } from "Vuex";
export default {
  name: "child_videos",
  data() {
    return {
      childrenPhoto: "",
      thisAlbumsData: {},
      drawer: false,
      childPhoto: {}
    };
  },

  activated() {
    this.getUserVideoData(this.userName);
  },
  mounted() {
    if (this.userName) {
      this.getUserVideoData(this.userName);
    }
  },
  watch: {
    userName() {
      if (this.userName) {
        this.getUserVideoData(this.userName);
      }
    },
    userVideoData() {
      if (this.userVideoData.length) {
        let data = this.$route.params.id;
        let newData = [];
        let userVideoData = this.userVideoData;
        for (let i = 0; i < userVideoData.length; i++) {
          if (userVideoData[i].videos === data) {
            newData.push(userVideoData[i]);
          }
        }
        this.childrenPhoto = newData;
        this.getVideosData(this.userName);
      }
    },
    videosData() {
      if (this.videosData.length) {
        let videosData = this.videosData;
        for (let i = 0; i < videosData.length; i++) {
          if (videosData[i].name === this.$route.params.id) {
            this.thisAlbumsData = videosData[i];
          }
        }
      }
    }
  },
  computed: {
    ...mapState("user", ["userName", "userVideoData", "videosData"])
  },
  methods: {
    closeDrawer() {
      this.$refs.video.pause();
      this.drawer = false;
    },
    openDrawer(data) {
      this.childPhoto = data;
      this.drawer = true;
    },
    gotoGm_sc() {
      this.$router.push("/users/gm_sp");
    },
    ...mapActions("user", ["getUserVideoData", "getVideosData"])
  }
};
</script>

<style lang="sass" scoped>
@import '@/assets/default.sass'
.child_videos
  width: 100%
  height: 100%
  .album
    width: 100%
    padding: 20px
    background-color: #eee
    box-shadow: 3px 3px 4px rgba(0,0,0,.1)
    .title
      width: 100%
      height: 40px
      @include flex(space-between,center)
      .name        
        >span
          margin-right: 10px
          &:first-child
            font-size: 21px
            color: #333
      .state        
        >span
          >i
            color: #eb2001
    .tags
      width: 100%
      overflow: hidden
      height: 40px
      line-height: 40px
      .el-tag
        margin-right: 10px
        width: 60px
        text-align: center
    .time
      width: 100%
      height: 40px
      @include flex(space-between,center)
      >span
        >i
          color: #eb2001
    .desc      
      width: 100%
      height: 50px
      @include align(center)
      >span
        line-height: 25px
        overflow: hidden
        display: -webkit-box
        -webkit-box-orient: vertical
        -webkit-line-clamp: 2
  .photo-list
    width: 100%
    margin-top: 10px
    >ul
      width: 100%
      @include align(flex-start)
      >li
        flex: 0 0 20%
        height: 220px
        padding: 10px
        margin-bottom: 30px
        overflow: hidden              
        .img
          width: 100%
          height: 80%
          overflow: hidden
          background-color: #000
          box-shadow: 2px 2px 3px rgba(0,0,0,.1) 
          @include flex(center,center)          
          >video
            width: 100%            
        .text
          width: 100%
          height: 30px
          box-shadow: 2px 2px 3px rgba(0,0,0,.1) 
          background-color: #eee
          line-height: 30px
          padding: 0 10px
          text-align: center
          >span
            font-size: 16px
            fotnt-weight: 700
  .no-photo
    width: 100%
    margin-top: 50px
    text-align: center
    cursor: pointer
    height: 60px
    line-height: 60px
    >span
      font-size: 16px
      color: #333
  .drawer
    .img
      width: 100%
      padding: 5%
      height: 80vh
      overflow: hidden
      @include flex(center,center)
      video
        max-height: 100%
        max-width: 100%
    .detail
      width: 100%
      padding: 5%
      height: 20vh
      background-color: #eee
      .label
        width: 100%
        height: 40px
        line-height: 40px
        font-size:18px
        @include flex(space-between,center)
        .time
          font-size: 14px
          i
            color: #eb2001
      .body
        width: 100%
        height: 60px
        padding-top: 10px
        @include align(center)
        >p
          overflow: hidden
          -webkit-line-clamp: 2
          display: -webkit-box
          color: #999
          line-height: 25px
          -webkit-box-orient: vertical
          width: 100%
</style>